<template>
  <div class="boardShowItem" :class="{columnReverse:isReverse}" >
     <lazyshow transition="fade-left" style="flex:1">

     <div class="boardShowItemTitle" >
       <p class="bold flex titleP" >
         <img class="svg " v-lazy="require('@/assets/img/icon/info.svg')" alt="">
         A message from @<slot name="title"></slot>
      </p>

       <p class="gray flex titleP" >
         <img class="svg" v-lazy="require('@/assets/img/icon/tips.svg')" alt="">
         <slot name="time"></slot>
      </p>
     </div>
     </lazyshow>
     <lazyshow transition="fade-right" style="flex:1" >
     <div class="boardShowItemContent">
        <p class="contentTitle">
           <slot name="username"></slot>
        </p>
        <p class="content">
          <imitationinput ><slot name="content"></slot></imitationinput>
        </p>
        <p class="footer">
          -- 第<slot name="footer"></slot>条留言
        </p>
     </div>
     </lazyshow>
  </div>
</template>

<script>
import Imitationinput from '@/components/common/imitationinput/imitationinput.vue';
import lazyshow from '../../../common/lazyshow/lazyshow.vue';
export default {
  components: { lazyshow, Imitationinput },
  name: "boardshowitem",
  data(){
    return{
     
    }
  },
  props:{
    isReverse:{
      type:Boolean,
      default:false,
    },
    index:{
      type:Number
    }
  }
  
};
</script>

<style scoped>
.boardShowItem{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  letter-spacing: 0px;
  height: 250px;
  margin-bottom: 150px;
  
}
.columnReverse{
  flex-direction: row-reverse;
}
P{
  width: 100%;
}
.boardShowItemTitle{
  padding-left: 30px;
  padding-right: 30px;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 250px;
}

.bold{
    font-weight: bold;
}
.boardShowItemContent{
  transition: all .3s ease;
  cursor: pointer;
  position: relative;
  height: 230px;
  padding-bottom: 20px;
  background-color: white;
  border-radius: 5px;
  font-size: .9rem;
  box-shadow: 0 0 0 1px rgba(53,72,91,.14),0 3px 2px rgba(0,0,0,.04),0 7px 5px rgba(0,0,0,.02),0 13px 10px rgba(0,0,0,.02),0 22px 17px rgba(0,0,0,.02) !important;
}
.boardShowItemContent:hover{
  box-shadow: 0 0 0 1px rgba(53,72,91,.24),0 3px 2px rgba(0,0,0,.14),0 7px 5px rgba(0,0,0,.12),0 13px 10px rgba(0,0,0,.12),0 22px 17px rgba(0,0,0,.12) !important;
}
.contentTitle{
  font-weight: bold;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  align-items: center;
  height: 50px;
  width: 90%;
  border-bottom: 1px solid gainsboro;
}
.content{
  padding-left: 5%;
  padding-right: 5%;
  width: 90%;
  font-size: .9rem;
  padding-top: 20px;
  color: black;
}
.footer{
   padding-left: 5%;
  padding-right: 5%;
  width: 90%;
  position: absolute;
  bottom:20px;
  text-align: right;
  font-size: .8rem;
}
.gray{
  font-family: cursive;
}
.svg{
  width: 20px;
  margin-right: 10px;
}
.titleP{
  margin-bottom: 10px;
  justify-content: flex-start;
}
.flexEnd{
  justify-content: flex-end;
}
</style>